<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优软社照片墙</title>
    <style>
        /* CSS部分 */
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            background-image: linear-gradient(-225deg, #FFE29F 0%, #FFA99F 48%, #FF719A 100%);
            overflow: hidden;
            height: 100vh;
        }

        /* 设置滚动条 */
        ::-webkit-scrollbar {
            width: 1px;
            height: 1px;
        }

        .images img {
            border: #fff solid 10px;
            max-width: 45vh;
            max-height: 50vh;
            transition: .5s;
        }

        .images:hover img {
            box-shadow: 0 10px 30px #86c4f7;
            transform: scale(1.05);
        }

        /* 创建一个水平滚动的包裹容器，用于展示内容 */
        .shell {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100vh;
            /*旋转90度，向上平移一个视口高度的距离 */
            transform: rotate(-90deg) translate3d(0, -100vh, 0);
            /* 设置变换的原点为右上角 */
            transform-origin: right top;
            overflow-x: hidden;
            height: 100vw;
            /* 设置3D透视效果 */
            perspective: 1px;
            transform-style: preserve-3d;
        }

        /* 创建一个图片容器，用于展示图片 */
        .images {
            display: flex;
            align-items: center;
            justify-content: center;
            /* 设置最小高度为视口高度的40% */
            min-height: 40vh;
            /* 设置变换的原点为中心点 */
            transform-origin: 50% 50%;
            /* 旋转90度，向前平移0.1px，放大1.1倍，向右平移0px，向下平移2vh */
            transform: rotate(90deg) translateZ(.1px) scale(1.1) translateX(0px) translateY(2vh);
            transition: 1s;
        }

        .slower {
            transform: rotate(90deg) translateZ(-.12px) scale(1.3) translateX(0%) translateY(-8vh);
        }

        .slower1 {
            transform: rotate(90deg) translateZ(-.25px) scale(1.35) translateX(0%) translateY(2vh);
        }

        .slower-down {
            transform: rotate(90deg) translateZ(-.1px) scale(1) translateX(0%) translateY(16vh);
        }

        .faster {
            transform: rotate(90deg) translateZ(-.05px) scale(1.1) translateX(0%) translateY(15vh);
        }

        .faster1 {
            transform: rotate(90deg) translateZ(.05px) scale(1.4) translateX(0%) translateY(10vh);
        }

        .fastest {
            transform: rotate(90deg) translateZ(.22px) scale(0.7) translateX(-10vh) translateY(-15vh);
        }

        .vertical {
            transform: rotate(90deg) translateZ(-.1px) scale(1.6) translateX(0%) translateY(-3vh);
        }
         .faster2 {
            transform: rotate(90deg) translateZ(.12px) scale(1.0) translateX(-10vh) translateY(-12vh);
        }
		.faster3 {
            transform: rotate(90deg) translateZ(.12px) scale(1.2) translateX(-10vh) translateY(2vh);
        }
		.faster4 {
            transform: rotate(90deg) translateZ(.12px) scale(1.2) translateX(-8vh) translateY(6vh);
        }
    </style>
</head>
<!-- HTML部分 -->

<body>
    <div class="shell">
        <div class="images slower">
            <img src="社团照片/吴承霖.jpg" title="吴承霖">
        </div>
        <div class="images faster">
            <img src="社团照片/陈克文.jpg" title="陈克文">
        </div>
        <div class="images vertical">
            <img src="社团照片/刘畅.jpg" title="刘畅">
        </div>
        <div class="images slower-down">
            <img src="社团照片/韩佳栩.jpg" title="韩佳栩">
        </div>
        <div class="images">
            <img src="社团照片/纪文清.jpg" title="纪文清">
        </div>
        <div class="images slower">
            <img src="社团照片/宋令玉 周生娟2.jpg" title="宋令玉 周生娟">
        </div>
        <div class="images faster1">
            <img src="社团照片/宋令玉 周生娟1.jpg"pg" title="宋令玉 周生娟">
        </div>
        <div class="images slower1">
            <img src="社团照片/高茗惠.jpg" title="高茗惠">
        </div>
        <div class="images">
            <img src="社团照片/刘香显.jpg" title="刘香显">
        </div>
        <div class="images slower">
            <img src="社团照片/刘泉伶.jpg" title="刘泉伶">
        </div>
        <div class="images faster">
            <img src="社团照片/王超.jpg" title="王超">
        </div>
         <div class="images faster2">
            <img src="社团照片/宋宇婷.jpg" title="宋宇婷">
            </div>
            <div class="images faster3">
            <img src="社团照片/李琴霞.jpg" title="李琴霞">
            </div>
             <div class="images faster4">
            <img src="社团照片/宛江萌.jpg" title="宛江萌">
        </div>
             <div class="images faster4">
            <img src=" ">
        </div>
    </div>
    <section class="music">
        <audio id="bgMusic" src="http://cv-senior-engineer.gitee.io/pleasantly-surprised/images/qlx.mp3" autoplay="autoplay" loop></audio>
</section>
 <!--鼠标拖尾-->
<span class="js-cursor-container"></span>
    <script>
        (function fairyDustCursor() {
 
            var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
            var width = window.innerWidth;
            var height = window.innerHeight;
            var cursor = { x: width / 2, y: width / 2 };
            var particles = [];
 
            function init() {
                bindEvents();
                loop();
            }
 
            // Bind events that are needed
            function bindEvents() {
                document.addEventListener('mousemove', onMouseMove);
                window.addEventListener('resize', onWindowResize);
            }
 
            function onWindowResize(e) {
                width = window.innerWidth;
                height = window.innerHeight;
            }
 
            function onMouseMove(e) {
                cursor.x = e.clientX;
                cursor.y = e.clientY;
 
                addParticle(cursor.x, cursor.y, possibleColors[Math.floor(Math.random() * possibleColors.length)]);
            }
 
            function addParticle(x, y, color) {
                var particle = new Particle();
                particle.init(x, y, color);
                particles.push(particle);
            }
 
            function updateParticles() {
 
                // Updated
                for (var i = 0; i < particles.length; i++) {
                    particles[i].update();
                }
 
                // Remove dead particles
                for (var i = particles.length - 1; i >= 0; i--) {
                    if (particles[i].lifeSpan < 0) {
                        particles[i].die();
                        particles.splice(i, 1);
                    }
                }
 
            }
 
            function loop() {
                requestAnimationFrame(loop);
                updateParticles();
            }
 
            /**
             * Particles
             */
 
            function Particle() {
 
                this.character = "*";
                this.lifeSpan = 120; //ms
                this.initialStyles = {
                    "position": "fixed",
                    "display": "inline-block",
                    "top": "0px",
                    "left": "0px",
                    "pointerEvents": "none",
                    "touch-action": "none",
                    "z-index": "10000000",
                    "fontSize": "25px",
                    "will-change": "transform"
                };
 
                // Init, and set properties
                this.init = function (x, y, color) {
 
                    this.velocity = {
                        x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
                        y: 1
                    };
 
                    this.position = { x: x + 10, y: y + 10 };
                    this.initialStyles.color = color;
 
                    this.element = document.createElement('span');
                    this.element.innerHTML = this.character;
                    applyProperties(this.element, this.initialStyles);
                    this.update();
 
                    document.querySelector('.js-cursor-container').appendChild(this.element);
                };
 
                this.update = function () {
                    this.position.x += this.velocity.x;
                    this.position.y += this.velocity.y;
                    this.lifeSpan--;
 
                    this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px, 0) scale(" + (this.lifeSpan / 120) + ")";
                }
 
                this.die = function () {
                    this.element.parentNode.removeChild(this.element);
                }
 
            }
 
            /**
             * Utils
             */
 
            // Applies css `properties` to an element.
            function applyProperties(target, properties) {
                for (var key in properties) {
                    target.style[key] = properties[key];
                }
            }
 
            if (!('ontouchstart' in window || navigator.msMaxTouchPoints)) init();
        })();    
    </script>
<!--鼠标点击特效-->
    <script>
        (function () {
            var a_idx = 0;
            window.onclick = function (event) {
                var a = new Array("❤❤", "❤❤", "❤❤", "❤❤","❤❤","❤❤","❤❤","❤❤");
 
                var heart = document.createElement("b"); //创建b元素
                heart.onselectstart = new Function('event.returnValue=false'); //防止拖动
 
                document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
                a_idx = (a_idx + 1) % a.length;
                heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式
 
                var f = 16, // 字体大小
                    x = event.clientX - f / 2, // 横坐标
                    y = event.clientY - f, // 纵坐标
                    c = randomColor(), // 随机颜色
                    a = 1, // 透明度
                    s = 1.2; // 放大缩小
 
                var timer = setInterval(function () { //添加定时器
                    if (a <= 0) {
                        document.body.removeChild(heart);
                        clearInterval(timer);
                    } else {
                        heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
                            c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
                            s + ");";
 
                        y--;
                        a -= 0.016;
                        s += 0.002;
                    }
                }, 15)
 
            }
            // 随机颜色
            function randomColor() {
 
                return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
                .random() * 255)) + ")";
 
            }
        }());
    </script>
		<!- 粉丝要的JS 导入  ->
		<script src="mm1.js"></script>
</body>

</html>
